<template>
  <div class="home">
      <van-pull-refresh v-model="common.refresh" @refresh="onRefresh" >
      <div  class="header" :style="{backgroundImage: 'url(' + userS.userinfo.bgImg + ')' , height: screenHeight + 'px'}">
        <van-image
            width="100px"
            height="100px"
            fit="cover"
            :src="userS.userinfo.avatar"
            style="border: 2px solid  rgba(255,255,255,0.84);background-color:  rgb(255,255,255,0.8);
            position: absolute;top:60%;right: 2%;"
            @click="showPre"
        />
        <p style="background-color: rgba(126,111,111,0.29);position: absolute;font-weight:bolder ;font-size: 30px; color: rgb(255,255,255); top:80%;right: 30%;" >{{userS.userinfo.nickName}}</p>
      </div>


      </van-pull-refresh>
  </div>
</template>

<style>

  .header{
      background-size: cover;
      background-position: center;
      //color:white;
      text-align: left;
       overflow: visible ;
    position: relative;
  }
  .show-box{
      padding:3px 12px;
      text-align: left;
  }
.wb_simple{
    text-align: left;line-height: 27px;padding-left: 5px;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;
}

</style>
<script setup>
import {onMounted, reactive, getCurrentInstance, ref} from "vue";

import {get_wb} from  "@/axios/weibo";
import {useRouter,useRoute} from 'vue-router'
import {userStore} from "@/stores/UserStore.js";
import {showImagePreview} from "vant";
import {user_info} from "@/axios/login.js";




const router = useRouter();
const route = useRoute();
const userId = route.query.userId
const userS = userStore();
const screenHeightALL  = ref (window.innerHeight)
const screenHeight = ref(window.innerHeight * 0.33);

const userinfo = ref({})

const common = reactive({
  refresh : false
})

const goInfo =() =>{
    router.push("/infoEdit")
}
const onRefresh = () =>{
  common.refresh = false;
}
const showPre = () =>{
  showImagePreview({
    images: [userS.userinfo.avatar],
    loop:false
  });
}


onMounted(() => {

  if(userId && userS.userinfo.userId != userId) {
    user_info({"userId":userId}).then(res=>{
      userinfo.value = {...res.data.data}
    }).catch(err=>{

    }) ;
  }else {
    userinfo.value = {
      ...userS.userinfo
    }
  }


})



</script>
